<script setup>

import {BaseImgUrl} from "../../utils/lshttp";

const props = defineProps({
  address: Object,
  pzList:Object
})

</script>

<template>
  <view class="pz_content">
    <view>
      <image :src="BaseImgUrl + '/home/pzzq_text.png'" style="width: 360rpx;height: 58rpx"></image>
      <view style="display: flex;justify-content: space-between;margin-top: 16rpx;flex-wrap: wrap">
        <view v-for="(item,index) in pzList" :key="index" style="position: relative">
          <view v-if="!item.logo" style="width: 190rpx;height: 190rpx;border-radius: 10rpx;background-color: #66666606"></view>
          <view v-else>
            <image :src="item.logo" style="width: 190rpx;height: 190rpx;border-radius: 10rpx"></image>
            <view class="img_name">{{ item.name }}</view>
            <view class="pz">
              品质
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<style scoped lang="scss">
.pz_content {
  width: 706rpx;
  margin: 20rpx auto 0;
  background: linear-gradient(180deg, #FFF5E7 0%, #FFFFFF 100%);
  border-radius: 16rpx 16rpx 16rpx 16rpx;
  border: 3rpx solid #FFFFFF;
  padding: 20rpx 30rpx;
}

.img_name {
  margin-top: 10rpx;
  font-weight: 400;
  font-size: 24rpx;
  text-align: center;
  color: #E5750A;
  line-height: 36rpx;
  padding: 6rpx 10rpx 2rpx;
  width: 190rpx;
  background: #FEF2E4;
  border-radius: 8rpx 8rpx 8rpx 8rpx;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-all;
  display: -webkit-box;

}

.pz {
  position: absolute;
  top: 0;
  z-index: 1;
  color: white;
  font-size: 24rpx;
  border-radius: 10rpx 0 10rpx 0;
  background-color: #3D3D3DAA;
  padding: 10rpx 16rpx;
}
</style>